import { useEffect, useRef, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Button } from 'antd'
import jsPreviewExcel from '@js-preview/excel'
import jsPreviewDocx from '@js-preview/docx'
import jsPreviewPdf from '@js-preview/pdf'
import { IResourceList } from '../ResourceZone/type'
import styles from './index.module.less'
import IconSvg from '@/components/IconSvg'
import '@js-preview/excel/lib/index.css'
import { downLoad, getResourceHandle } from '../ResourceZone/service'
import { exportData, isNullArray, isNullData } from '@/utils'
import '@js-preview/docx/lib/index.css'

interface ParamsRouter extends IResourceList {
  url: Blob
}

export default () => {
  const location = useLocation()
  const previewRef = useRef<HTMLDivElement>(null)
  const { url, id, name } = location.state as ParamsRouter

  // 存放当前页面数据
  const [pageInfo, setPageInfo] = useState<IResourceList>()

  // 获取资源列表
  const getList = async () => {
    const params = {
      pageIndex: 1,
      pageSize: 999,
      search: {
        name: '',
      },
    }
    const res = await getResourceHandle(params)
    if (isNullData(res) && res.data && isNullArray(res.data)) {
      const info = res.data.items.find((item) => item.id === id)
      setPageInfo(info)
    }
  }

  // 下载
  const getFile = async (record: any) => {
    const realName = record.address.split('/')[1]
    const params = {
      path: 'uploadFile',
      imageNames: [realName],
      originalFileName: record.name,
      id: record.id,
    }
    const res = await downLoad(params)
    if (res) {
      exportData(res, record.name, realName.split('.')[1])
      await getList()
    }
  }

  // 根据类型渲染预览页面
  const previewDocument = (type: string, dom: HTMLDivElement) => {
    if (type === 'xlsx') {
      const local = window.URL.createObjectURL(url)
      const myExcelPreviewer = jsPreviewExcel.init(dom)
      myExcelPreviewer.preview(local)
    }
    if (type === 'docx') {
      const local = window.URL.createObjectURL(url)
      // 初始化时指明要挂载的父元素Dom节点
      const myDocxPreviewer = jsPreviewDocx.init(dom)
      // 传递要预览的文件地址即可
      myDocxPreviewer.preview(local)
    }
    if (type === 'pdf') {
      const local = window.URL.createObjectURL(url)
      const myPdfPreviewer = jsPreviewPdf.init(dom)
      myPdfPreviewer.preview(local)
    }
  }

  useEffect(() => {
    if (previewRef.current) {
      getList()
      previewDocument(name.split('.').at(-1)!, previewRef.current)
    }
  }, [previewRef])

  return (
    <div className='layout-main-conent'>
      <div className={styles.content}>
        <div className={styles.top}>
          <div className={styles.title}>附件：{pageInfo?.name}</div>
          <div className={styles.info}>
            <div>发布时间：{pageInfo?.publishDate}</div>
            <div>阅读量：{pageInfo?.readCount}</div>
            <div>下载量：{pageInfo?.downCount}</div>
          </div>
        </div>
        <div className={styles.btn}>
          <Button onClick={() => getFile(location.state)} style={{ width: '104px' }} icon={<IconSvg name='download' />}>
            下载
          </Button>
        </div>
      </div>
      <div className={styles.preview} ref={previewRef}></div>
    </div>
  )
}
